<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    	<link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
		<title>8天出行-地勤车况系统</title>
		<link rel="stylesheet" href="libs/wuui/weui.min.css" />
		<style type="text/css">
		body, .weui-cell{
			color: #b2b2b2;
			font-size: 13px;
		}
		.page.pg-top{
			padding-top: 50px;
		}
		.page.pg-bottom{
			padding-bottom: 50px;
		}
		header {
			width: 100%;
			height: 50px;
			background: #01ace9;
			position: fixed;
			top: 0;
			z-index: 3;
		}
		header .back:before {
			content: " ";
			display: inline-block;
			height: 10px;
			width: 10px;
			border-width: 0 0 2px 2px;
			border-color: #fff;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		}
		
		header a.placeholder {
			display: block;
			padding: 0 20px
		}
		
		header .placeholder {
			margin: 0;
			height: 50px;
			line-height: 50px;
			background: none;
			font-size: 16px;
			color: #fff;
		}
		.weui-cells.uploader{
			margin-top: 0;
		}
		.weui-cells.uploader:before{
			border-top: 0px;
		}
		.uploader .weui-cell:before{
			left: 0;
		}
		.uploader .weui-cell .textarea{
			border: 1px solid #d9d9d9;
			color:#333333;
		}


		.del-single{
			position: absolute;
		    right: -100px;
		    color:#666;
		    border-color: #d9d9d9;
		    font-size: 13px;
		    padding: 2px 20px;
		    line-height: 2;
		}


		/*footer*/
		footer {
		    position: fixed;
		    z-index: 5;
		    bottom: 0;
		    width: 100%;
		    height: 50px;
		    background: #fff;
		    border-top: 1px solid #e5e5e5;
		}
		footer .weui-flex {
		    padding: 7px 5px;
		}
		footer a {
		    text-align: center;
		    line-height: 50px;
		    color: #333;
		}
		footer a {
		    padding: 0 7px;
		}
		footer a div {
		    line-height: 35px;
		    border-radius: 4px;
		    background: #d4f2fd;
		}
		footer a:active div{
			background:#aae2f7;
		}
		.add-lst{
			    border-bottom: 1px solid #e5e5e5;
		}
		a.add-btn,a.del-btn{
		    /*width: 30%;*/
		    float: left;
		    margin: 15px 5px 15px 15px;
		    padding:0 20px;
		    font-size: 13px;
		    color:#666;
		    border-color:#d9d9d9;
		}
		a.add-btn:active,a.del-btn:active
		{
			color:#333;
			background:#d4f2fd;
		}
		a.del-btn{
			display: none;
		}
		</style>
	</head>

	<body ontouchstart style="margin-bottom: 60px;">
		
		<header>
			<div class="weui-flex">
				<div><a href="javascript:window.location.replace('cheliangjiancha.html');" class="placeholder back"> 新伤 </a></div>
			</div>
		</header>
		
        <div class="weui-cells weui-cells_form page pg-top uploader">
            <!--<div class="add-lst">
            	<div class="weui-cell" data-id="uploaderCustom-0001" id="uploaderCustom-0001">
            	    <div class="weui-cell__bd">
            	        <div class="weui-uploader">
            	            <div class="weui-uploader__hd">
            	                <p class="weui-uploader__title">新伤</p>
            	            </div>
            	            <div class="weui-uploader__bd">
            	                <ul class="weui-uploader__files" id="uploaderCustomFiles"></ul>
            	                <div class="weui-uploader__input-box">
            	                    <input id="uploaderCustomInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
            	                </div>
            	            </div>
            	        </div>
            	    </div>
            	</div>
            	<div class="weui-cell">
            		<div class="weui-cell__bd textarea">
            	        <textarea name="beforeDesc" class="weui-textarea" placeholder="备注信息..." rows="3"></textarea>
            	        <div class="weui-textarea-counter"><span>0</span>/200</div>
            	    </div>
            	</div>
            </div>-->
            <a href="javascript:;" class="weui-btn weui-btn_plain-default add-btn">增加新伤</a>
            <a href="javascript:;" class="weui-btn weui-btn_plain-default del-btn">删除</a>
        </div>
        
        <!-- <div class="weui-btn-area">
            <a id="uploaderCustomBtn" href="javascript:" class="weui-btn weui-btn_primary">上传</a>
        </div> -->
        
        <footer>
	    	<div class="weui-flex">
	            <a id="uploaderCustomBtn" href="javascript:void(0);" class="weui-flex__item">
	            	<div class="placeholder">确认</div>
	            </a>
	            <a href="javascript:window.location.replace('cheliangjiancha.html');" class="weui-flex__item" style="display:none;">
	            	<div class="placeholder">取消</div>
	            </a>
	        </div>
	    </footer>

		<script type="text/javascript" src="libs/jquery-2.2.3.min.js" charset="UTF-8"></script>
		<!--weui.js需要在body里面加载才起作用-->
		<script type="text/javascript" src="libs/weui.js/weui.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/app.js" charset="UTF-8"></script>
		<script type="text/javascript">
		(function(){
			
			var ufs = [],
				car = app.getJSONSessionStorage('car'),
				user = app.getJSONSessionStorage('user'),
				uploadLoading = null,
				$titleCarNum = $('#titleCarNum'),
				uploadSuccessCount=0;
			
			function generateMixed(n) {
				var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
			     var res = "";
			     for(var i = 0; i < n ; i ++) {
			         var id = Math.ceil(Math.random()*35);
			         res += chars[id];
			     }
			     return res;
			}
			
			
			
			/*增加新伤*/
			$('.add-btn').click(function(){
				addEle();
			});
			
			//根据下标删除数组
			Array.prototype.baoremove = function(dx){
			　　if(isNaN(dx)||dx>this.length){return false;}
			　　this.splice(dx,1);
			　}
			
			/*删除增加的新伤*/
			$('.del-btn').click(function(){
				//删除文件上传数组
				ufs.baoremove($('.add-lst').length - 1);
				uploadSuccessCount-- ;
				
				$('div.add-lst:last').remove();
				var num = $('.add-lst').length;
				if(num==1){
					$('.del-btn').css('display','none');
				}
			})
			
			$.ajax({
    			url:"/api/tukuan/mobile/car/check/getUploadXsInfo/"+user.id,
				type:"get",
				success: function(result){
					$.map(result, function(str) {
						var p = JSON.parse(str) ;
						var gen = p.hField.substring(p.hField.indexOf("-")+1, p.hField.length) ;
						hf(gen, p.beforeImageUrl, p.beforeDesc);
					})
					
					$('.add-lst-hf .del-single').click(function() {
						var addlst = $(this).closest('.add-lst-hf') ;
						var hField = $(addlst).children().data('id');
						
						delCache(hField);
						addlst.remove();
					});
					
					//默认显示一个
					addEle();
				}
			});
			
			//删除缓存
			function delCache(hField) {
				$.ajax({
	    			url:"/api/tukuan/mobile/car/check/delUploadXsInfo/"+user.id+"/"+hField,
					type:"get",
					success: function(result){
					}
				});
			}
			
			function hf(gen, imgUrl, desc) {
				var uid = 'uploaderCustom-'+gen ;
				var uid_view = 'uploaderCustomView-'+gen ;
				var uid_desc = 'beforeDesc-'+gen ;
				var addbtn = $('.add-btn');
				var addHTML = $(
								 "<div class='add-lst-hf'>"+
            	"<div class='weui-cell' data-id='"+uid+"' id='"+uid+"'>"+
            	    "<div class='weui-cell__bd'>"+
            	        "<div class='weui-uploader'>"+
            	            "<div class='weui-uploader__hd'>"+
            	                "<p class='weui-uploader__title'>新伤</p>"+
            	            "</div>"+
            	            "<div class='weui-uploader__bd'>"+
            	                "<div style='width: 77px; height: 77px; background-image: url("+imgUrl+"); position: relative;background-size: cover;border: 1px solid #d9d9d9;'>"+
            	                "<a href='javascript:;' class='weui-btn weui-btn_plain-default del-single' style='position: absolute; right: -100px;'>删除</a>"+
            	                "</div>"+
            	            "</div>"+
            	        "</div>"+
            	    "</div>"+
            	"</div>"+
            	"<div class='weui-cell'>"+
            		"<div class='weui-cell__bd textarea'>"+
            	        "<textarea name='"+uid_desc+"' class='weui-textarea' placeholder='备注信息...'' rows='3' readonly>"+desc+"</textarea>"+
            	        "<div class='weui-textarea-counter'><span>0</span>/200</div>"+
            	    "</div>"+
            	"</div>"+
            "</div>"
					);
					addbtn.before(addHTML);

			}
			
			
			function addEle() {
				var gen = generateMixed(5) ;
				var uid = 'uploaderCustom-'+gen ;
				var uid_view = 'uploaderCustomView-'+gen ;
				var uid_desc = 'beforeDesc-'+gen ;
				var addbtn = $('.add-btn');
				var addHTML = $(
								 "<div class='add-lst'>"+
            	"<div class='weui-cell' data-id='"+uid+"' id='"+uid+"'>"+
            	    "<div class='weui-cell__bd'>"+
            	        "<div class='weui-uploader'>"+
            	            "<div class='weui-uploader__hd'>"+
            	                "<p class='weui-uploader__title'>新伤</p>"+
            	            "</div>"+
            	            "<div class='weui-uploader__bd'>"+
            	                "<ul class='weui-uploader__files' id='"+uid_view+"'></ul>"+
            	                "<div class='weui-uploader__input-box'>"+
            	                    "<input id='' class='weui-uploader__input' type='file' accept='image/*' multiple=''>"+
            	                "</div>"+
            	            "</div>"+
            	        "</div>"+
            	    "</div>"+
            	"</div>"+
            	"<div class='weui-cell'>"+
            		"<div class='weui-cell__bd textarea'>"+
            	        "<textarea name='"+uid_desc+"' class='weui-textarea' placeholder='备注信息...'' rows='3'></textarea>"+
            	        "<div class='weui-textarea-counter'><span>0</span>/200</div>"+
            	    "</div>"+
            	"</div>"+
            "</div>"
					);
					addbtn.before(addHTML);
					var num = $('.add-lst').length;
					if(num>1){
						$('.del-btn').css('display','block');
					}
					uploadSuccessCount ++ ;
					addUpload(uid, uid_view, uid_desc);
			}
			
			function addUpload(uid, uid_view, uid_desc) {
				/* 图片手动上传 */
				var uploadCustomFileList = [], 
					uploadCount = 0;
				
				// 这里是简单的调用，其余api请参考文档
				weui.uploader('#'+uid, {
					url: '/api/tukuan/mobile/car/check/upload_xs',
					auto: false,
					compress: {
				       width: 800,
				       height: 600,
				       quality: .3
				   	},
					onBeforeQueued: function(files) {
						if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
				           	weui.alert('请上传图片');
				           	return false; 
				       	}
				       	if(this.size > 10 * 1024 * 1024){
				           	weui.alert('请上传不超过10M的图片');
				           	return false;
				       	}
				       	if (files.length > 1) { // 防止一下子选择过多文件
				           	weui.alert('最多只能上传1张图片，请重新选择');
				           	return false;
				       	}
				       	if (uploadCount + 1 > 1) {
				           	weui.alert('最多只能上传1张图片');
				           	return false;
				       	}
				       	++uploadCount;
				   	},
					onQueued: function() {
						uploadCustomFileList.push(this);
						ufs.push(this);
					},
				   	onBeforeSend: function(data, headers){
						var beforeDesc = $('textarea[name='+uid_desc+']').val() ;
				       	$.extend(data, {
				       		beforeUserId: user.id,
				       		carId: car.id,
				       		hField: uid,
				       		beforeDesc: (null == beforeDesc || "" == beforeDesc ? '' : beforeDesc)
						});
						uploadLoading = weui.loading('上传中请稍等');
				   	},
				   	onSuccess: function (ret) {
				   		uploadSuccessCount-- ;
				   		uploadLoading.hide() ;
				   		if(uploadSuccessCount == 0) {
				   			window.location.replace('cheliangjiancha.html');
				   		}
				   	},
				   	onError: function(err){
				   		uploadLoading.hide() ;
				       	console.log(this, err);
				   	}
				});
				
				// 缩略图预览
				document.querySelector('#'+uid_view).addEventListener('click', function(e){
				    var target = e.target;
				    
				    while(!target.classList.contains('weui-uploader__file') && target){
				        target = target.parentNode;
				    }
				    if(!target) return;
				
				    var url = target.getAttribute('style') || '';
				    var id = target.getAttribute('data-id');
				
				    if(url){
				        url = url.match(/url\((.*?)\)/)[1];
				    }
				    var gallery = weui.gallery(url, {
				        onDelete: function(){
				        	uploadCount--;
				            weui.confirm('确定删除该图片？', function(){
				            	
				            	ufs.baoremove($('.add-lst').length - 1);
								uploadSuccessCount-- ;
				            	
				                var index;
				                for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
				                    var file = uploadCustomFileList[i];
				                    if(file.id == id){
				                        index = i;
				                        break;
				                    }
				                }
				                if(index) uploadCustomFileList.splice(index, 1);
				
				                target.remove();
				                gallery.hide();
				            });
				        }
				    });
				});
			}
			
			//上传文件
			$('#uploaderCustomBtn').on('click', function(){
				if(ufs.length > 0) {
					ufs.forEach(function(file){
				        file.upload();
				    });
				}
				else if($('.add-lst-hf').length > 0){
				 	window.location.replace('cheliangjiancha.html');
				 } 

				else {
					weui.alert('请先选择新伤图片、填写备注信息');
				}
				
			});
			
			/* 图片手动上传 */
			/*var uploadCustomFileList = [], 
				uploadCount = 0;
			
			$titleCarNum.html(car.carFullNum);*/
			
			// 这里是简单的调用，其余api请参考文档
			/*weui.uploader('#uploaderCustom-0001', {
				url: window.app.domain.API_URL_MANAGER + '/car/check/upload_xs',
				auto: false,
				compress: {
			       width: 800,
			       height: 600,
			       quality: .3
			   	},
				onBeforeQueued: function(files) {
					if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
			           	weui.alert('请上传图片');
			           	return false; 
			       	}
			       	if(this.size > 10 * 1024 * 1024){
			           	weui.alert('请上传不超过10M的图片');
			           	return false;
			       	}
			       	if (files.length > 1) { // 防止一下子选择过多文件
			           	weui.alert('最多只能上传1张图片，请重新选择');
			           	return false;
			       	}
			       	if (uploadCount + 1 > 1) {
			           	weui.alert('最多只能上传1张图片');
			           	return false;
			       	}
			       	++uploadCount;
			   	},
				onQueued: function() {
					uploadCustomFileList.push(this);
					ufs.push(this);
				},
			   	onBeforeSend: function(data, headers){
			   		var beforeDesc = $('textarea[name=beforeDesc]').val() ;
			       	$.extend(data, {
			       		beforeUserId: user.id,
			       		carId: car.id,
			       		hField: 'uploaderCustom-0001',
			       		beforeDesc: (null == beforeDesc || "" == beforeDesc ? '' : beforeDesc)
					});
					uploadLoading = weui.loading('上传中请稍等');
			   	},
			   	onSuccess: function (ret) {
			   		uploadSuccessCount-- ;
			   		uploadLoading.hide() ;
			   		if(uploadSuccessCount == 0) {
			   			window.location.replace('cheliangjiancha.html');
			   		}
			   		console.log(uploadSuccessCount)
			   	},
			   	onError: function(err){
			   		uploadLoading.hide() ;
			       	console.log(this, err);
			   	}
			});*/
			
			// 缩略图预览
			/*document.querySelector('#uploaderCustomFiles').addEventListener('click', function(e){
			    var target = e.target;
			    
			    while(!target.classList.contains('weui-uploader__file') && target){
			        target = target.parentNode;
			    }
			    if(!target) return;
			
			    var url = target.getAttribute('style') || '';
			    var id = target.getAttribute('data-id');
			
			    if(url){
			        url = url.match(/url\((.*?)\)/)[1];
			    }
			    var gallery = weui.gallery(url, {
			        onDelete: function(){
			        	uploadCount--;
			            weui.confirm('确定删除该图片？', function(){
			                var index;
			                for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
			                    var file = uploadCustomFileList[i];
			                    if(file.id == id){
			                        index = i;
			                        break;
			                    }
			                }
			                if(index) uploadCustomFileList.splice(index, 1);
			
			                target.remove();
			                gallery.hide();
			            });
			        }
			    });
			});
*/
			
		})();
		</script>
	</body>

</html>